<template>
  <div class="navbar">
    <div style="margin-top:1rem;color:#fff;" >
      <el-avatar :size="150" :src="staticImg" />
      <h2>管理员</h2>
    </div>
    <el-menu
      active-text-color="#ffd04b"
      background-color="#545c64"
      class="el-menu-vertical-demo"
      :default-active="activeIndex"
      text-color="#fff"
      @select="handleMenuSelect"
    >
      <el-menu-item index="1">
        <el-icon><icon-menu /></el-icon>
        <span>社区信息</span>
      </el-menu-item>

      <!-- <el-menu-item index="2">
        <el-icon>
          <location />
        </el-icon>
        <span>社区招聘</span>
      </el-menu-item> -->

      <el-menu-item index="3">
        <el-icon>
          <document />
        </el-icon>
        <span>社区通知</span>
      </el-menu-item>
      
    </el-menu>
  </div>
</template>

<script setup lang="ts">
import { ref, watch, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from "@element-plus/icons-vue";
import FailImage from "@/assets/img/imgFail.png";
import staticImg from "@/assets/img/static.png";

const activeIndex = ref("");

const handleMenuSelect = (index: string) => {
  const routeMap: Record<string, { name: string }> = {
    "1": { name: "HomeCommunity" },
    "2": { name: "HomeJob" },
    "3": { name: "HomeNotice" },
  };

  if (routeMap[index]) {
    router.push(routeMap[index]);
  }
};

// 根据路由更新 activeTAB
const updateActiveIndex = () => {
  const routePath = route.path.split("/")[2];
  if (routePath) {
    switch (routePath) {
      case "homeCommunity":
        activeIndex.value = "1";
        return;
      case "homeJob":
        activeIndex.value = "2";
        return;
      case "homeNotice":
        activeIndex.value = "3";
        return;
      default:
        return;
    }
  }
};
// 初始化时和路由变化时都更新 activeTAB
watch(() => route.path, updateActiveIndex);
onMounted(() => {
  updateActiveIndex();
});
</script>
<style scoped>
/* 去右侧白边 */
.el-menu-vertical-demo {
  border: 0;
}
</style>
